<template>
  <yd-layout class="benefit">
    <v-header slot="navbar" title="惠民专区">
      <router-link to="/" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </router-link>
    </v-header>
    <yd-tab v-model="activeIndex">
      <yd-tab-panel :label="item" v-for = "(item, index) in tabLi" :key = "index">
        <div class="benefit_con">
          <yd-slider autoplay="3000">
            <yd-slider-item v-for="item in sliderLi" :key="item.id">
              <a :href="item.link">
                <box :bgImg='item.imgSrc' prop="118:413"></box>
              </a>
            </yd-slider-item>
          </yd-slider>
          <yd-list>
            <yd-list-item v-for="(item, key) in list" :key="key">
              <img slot="img" :src="item.img">
              <span slot="title">{{item.title}}</span>
              <yd-list-other slot="other">
                <div>
                  <span class="demo-list-price"><em>¥</em>{{item.price}}</span>
                  <span class="demo-list-del-price">¥{{item.w_price}}</span>
                </div>
                <div>content</div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
        </div>
      </yd-tab-panel>
    </yd-tab>
  </yd-layout>
</template>
<script>
export default {
  name: 'benefit',
  data () {
    return {
      activeIndex: 0,
      sliderLi: [],
      tabLi: ['全部', '善缘有品', '品牌'],
      list: []
    }
  },
  created () {
    this.activeIndex = this.$route.params.type * 1
  },
  watch: {
    activeIndex: {
      immediate: true,
      handler (val) {
        this.init(val)
      }
    }
  },
  methods: {
    init (val) {
      this.sliderLi = [{
        id: '0',
        link: 'http://www.ydcss.com',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }, {
        id: '1',
        link: 'http://www.ydcss.com',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }, {
        id: '2',
        link: 'http://www.ydcss.com',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }]
      this.list = [{
        img: '//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg',
        title: '标题111标题标题标题标题',
        price: 156.23,
        w_price: 89.36
      }, {
        img: '//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg',
        title: '标题222标题标题标题标题',
        price: 256.23,
        w_price: 89.36
      }, {
        img: '//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg',
        title: '标题333标题标题标题标题',
        price: 356.23,
        w_price: 89.36
      }, {
        img: '//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg',
        title: '标题444标题标题标题标题',
        price: 456.23,
        w_price: 89.36
      }, {
        img: '//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg',
        title: '标题555标题标题标题标题',
        price: 556.23,
        w_price: 89.36
      }, {
        img: '//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg',
        title: '标题666标题标题标题标题',
        price: 656.23,
        w_price: 89.36
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
  .benefit_con {
    box-sizing: border-box;
    padding: $padding;
  }
</style>
